<template>
  <view class="preview-container">
    <!-- 页头 -->
     <CustomHeader></CustomHeader>
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image
            class="back-icon"
            src="/static/icons/candidate/pre_page.png"
          ></image>
        </view>
        <text class="header-title">简历预览</text>
        <view class="header-right">
        </view>
      </view>
    </view>

    <!-- 个人信息 -->
    <view class="personal-info">
      <view class="info-left">
        <view class="name-section">
          <text class="name">{{ resumeData.name || "未填写姓名" }}</text>
        </view>
        <view class="school-major" v-if="resumeData.school || resumeData.major">
          <text>{{ resumeData.school }}{{ resumeData.major ? ' · ' + resumeData.major : '' }}</text>
        </view>
      </view>
      <view class="avatar-section">
        <view class="avatar-container">
          <image
            class="avatar"
            :src="resumeData.avatar"
            mode="aspectFill"
          ></image>
          <!-- 性别角标 -->
          <view 
            class="gender-badge" 
            v-if="resumeData.sexValue === 1 || resumeData.sexValue === 0"
          >
            <image 
              class="gender-icon" 
              :src="resumeData.sexValue === 1 ? '/static/icons/candidate/boy.png' : '/static/icons/candidate/gril.png'"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="divider"></view>

    <!-- 优势信息 -->
    <view class="advantage-section">
      <!-- 求职状态 -->
      <view class="status-item">
        <text class="status-text">{{ resumeData.status || "暂无求职状态" }}</text>
      </view>

      <!-- 基本信息 -->
      <view class="basic-info">
        <!-- 毕业时间 -->
        <view class="info-item" v-if="resumeData.graduationYear">
          <image class="info-icon" src="/static/icons/candidate/bag.png"></image>
          <text>{{ resumeData.graduationYear }}{{ getGraduationStatus(resumeData.graduationYear) }}</text>
        </view>

        <!-- 学历 -->
        <view class="info-item" v-if="resumeData.education">
          <image class="info-icon" src="/static/icons/candidate/edu.png" style="width:36rpx; height: 36rpx;"></image>
          <text>{{ resumeData.education }}</text>
        </view>

        <!-- 年龄 -->
        <view class="info-item" v-if="resumeData.age && resumeData.age > 0">
          <image class="info-icon" src="/static/icons/candidate/cake-fill.png" style="width:31rpx; height: 31rpx;"></image>
          <text>{{ resumeData.age }}岁</text>
        </view>
      </view>

      <!-- 个人优势 -->
      <view class="advantage-content" v-if="resumeData.advantageHtml">
        <rich-text class="advantage-html" :nodes="resumeData.advantageHtml"></rich-text>
      </view>
    </view>

    <!-- 求职期望 -->
    <view class="section" v-if="resumeData.workExpectList && resumeData.workExpectList.length > 0">
      <view class="section-title">求职期望</view>
      <view class="expect-list">
        <view 
          class="expect-item" 
          v-for="(expectation, index) in resumeData.workExpectList" 
          :key="index"
        >
          <view class="expect-header">
            <text class="job-name">{{ expectation.jobName }}</text>
            <text class="city">{{ expectation.city }}</text>
            <text class="salary">{{ expectation.beginSalary }}-{{ expectation.endSalary }}K</text>
          </view>
          <view class="expect-industry">
            <text>{{ expectation.industry }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 项目经历 -->
    <view class="section" v-if="resumeData.projectExpList && resumeData.projectExpList.length > 0">
      <view class="section-title">项目经历</view>
      <view class="project-list">
        <view 
          class="project-item" 
          v-for="(project, index) in resumeData.projectExpList" 
          :key="index"
        >
          <view class="project-header">
            <text class="project-name">{{ project.projectName }}</text>
            <text class="project-period">{{ formatDate(project.beginDate) }}-{{ formatDate(project.endDate) }}</text>
          </view>
          <view class="project-role">
            <text>职责: {{ project.roleName }}</text>
          </view>
          <view class="project-content" v-if="project.contentHtml">
            <text class="content-label">项目描述:</text>
            <rich-text class="content-html" :nodes="project.contentHtml"></rich-text>
          </view>
          <view class="project-achievement" v-if="project.projectAchievementHtml">
            <text class="achievement-label">项目业绩:</text>
            <rich-text class="achievement-html" :nodes="project.projectAchievementHtml"></rich-text>
          </view>
          <view class="project-url" v-if="project.projectUrl">
            <text class="url-label">项目链接:</text>
            <text class="url-text">{{ project.projectUrl }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 工作经历 -->
    <view class="section" v-if="resumeData.workExpList && resumeData.workExpList.length > 0">
      <view class="section-title">工作经历</view>
      <view class="work-list">
        <view 
          class="work-item" 
          v-for="(work, index) in resumeData.workExpList" 
          :key="index"
        >
          <view class="work-header">
            <text class="company-name">{{ work.companyName }}</text>
            <text class="work-period">{{ formatDate(work.beginDate) }}-{{ formatDate(work.endDate) }}</text>
          </view>
          <view class="work-position">
            <text>岗位: {{ work.position }}</text>
          </view>
          <view class="work-content" v-if="work.contentHtml">
            <text class="content-label">工作内容:</text>
            <rich-text class="content-html" :nodes="work.contentHtml"></rich-text>
          </view>
        </view>
      </view>
    </view>

    <!-- 教育经历 -->
    <view class="section" v-if="resumeData.educationList && resumeData.educationList.length > 0">
      <view class="section-title">教育经历</view>
      <view class="education-list">
        <view 
          class="education-item" 
          v-for="(education, index) in resumeData.educationList" 
          :key="index"
        >
          <view class="education-header">
            <view class="education-info">
              <text class="school-name">{{ education.school }}</text>
              <view class="degree-major">
                <text class="education-degree">{{ education.education }}</text>
                <text class="dot">·</text>
                <text class="education-major">{{ education.major }}</text>
              </view>
            </view>
            <text class="education-period">{{ formatDate(education.beginDate) }}-{{ formatDate(education.endDate) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 资格证书 -->
    <view class="section" v-if="credentialsList.length > 0">
      <view class="section-title">资格证书</view>
      <view class="tags-container">
        <view
          class="credentials-tag"
          v-for="(credential, index) in credentialsList"
          :key="index"
        >
          <text class="tag-text">{{ credential }}</text>
        </view>
      </view>
    </view>

    <!-- 专业技能 -->
    <view class="section" v-if="skillsList.length > 0">
      <view class="section-title">专业技能</view>
      <view class="tags-container">
        <view
          class="skills-tag"
          v-for="(skill, index) in skillsList"
          :key="index"
        >
          <text class="tag-text">{{ skill }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getMyResume } from "../../../api/resume.js";
import CustomHeader from "@/components/CustomHeader.vue";
// 简历数据
const resumeData = ref({
  id: "",
  name: "",
  age: "",
  location: "",
  education: "",
  phone: "",
  sex: "",
  sexValue: "", // 原始性别值 1男 0女 2保密
  avatar: "/static/images/avatar.png",
  status: "",
  advantage: "",
  advantageHtml: "",
  credentials: "",
  skills: "",
  graduationYear: "",
  birthday: "",
  school: "",
  major: "",
  workExpectList: [],
  projectExpList: [],
  educationList: [],
  workExpList: [],
});

// 资格证书和专业技能列表
const credentialsList = ref([]);
const skillsList = ref([]);


// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return "";
  return dateString.replace(/-/g, ".");
};

// 性别映射函数
const getSexText = (sex) => {
  switch (sex) {
    case 1:
      return "男";
    case 2:
      return "女";
    case 3:
      return "保密";
    default:
      return "未知";
  }
};

// 计算年龄
const calculateAge = (birthday) => {
  if (!birthday) return 0;
  
  const birthDate = new Date(birthday);
  const today = new Date();
  
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();
  
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  
  return age > 0 ? age : 0;
};

// 判断毕业年份类型
const getGraduationStatus = (graduationYear) => {
  if (!graduationYear) return "";
  
  const currentYear = new Date().getFullYear();
  const currentMonth = new Date().getMonth() + 1;
  
  if (graduationYear === currentYear) {
    return currentMonth < 6 ? "应届生" : "往届生";
  }
  
  if (graduationYear > currentYear) {
    return "应届生";
  }
  
  return "往届生";
};

// 获取最新学历
const getLatestEducation = (educationList) => {
  if (!educationList || educationList.length === 0) return "";
  
  const sortedEducation = [...educationList].sort((a, b) => {
    const endDateA = a.endDate === "至今" ? "9999-12" : a.endDate;
    const endDateB = b.endDate === "至今" ? "9999-12" : b.endDate;
    
    const dateA = new Date(endDateA.replace(/-/g, '/'));
    const dateB = new Date(endDateB.replace(/-/g, '/'));
    return dateB - dateA;
  });
  
  return sortedEducation[0]?.education || "";
};

// 获取学校和专业信息
const getSchoolMajorInfo = (educationList) => {
  if (!educationList || educationList.length === 0) return { school: "", major: "" };
  
  const sortedEducation = [...educationList].sort((a, b) => {
    const endDateA = a.endDate === "至今" ? "9999-12" : a.endDate;
    const endDateB = b.endDate === "至今" ? "9999-12" : b.endDate;
    
    const dateA = new Date(endDateA.replace(/-/g, '/'));
    const dateB = new Date(endDateB.replace(/-/g, '/'));
    return dateB - dateA;
  });
  
  return {
    school: sortedEducation[0]?.school || "",
    major: sortedEducation[0]?.major || ""
  };
};


// 返回上一页
const goBack = () => {
  uni.navigateBack();
};



// 获取简历数据
const fetchResumeData = async () => {
  try {
    console.log("开始获取简历预览数据...");
    
    // 查看我的简历，调用我的简历接口
    console.log("获取我的简历");
    const data = await getMyResume();
    
    console.log("获取简历预览数据成功:", data);

    if (data) {
      // 获取学校和专业信息
      const schoolMajorInfo = getSchoolMajorInfo(data.educationList || []);
      
      // 更新简历数据
      resumeData.value.id = data.id || "";
      resumeData.value.name = data.nickName || "";
      resumeData.value.phone = data.phone || "";
      resumeData.value.avatar = data.face || "/static/images/avatar.png";
      resumeData.value.sex = getSexText(data.sex);
      resumeData.value.sexValue = data.sex; // 保存原始性别值
      resumeData.value.graduationYear = data.graduationYear || "";
      resumeData.value.birthday = data.birthday || "";
      resumeData.value.age = calculateAge(data.birthday);
      resumeData.value.education = getLatestEducation(data.educationList || []);
      resumeData.value.status = data.status || "";
      resumeData.value.advantage = data.advantage || "";
      resumeData.value.advantageHtml = data.advantageHtml || "";
      resumeData.value.credentials = data.credentials || "";
      resumeData.value.skills = data.skills || "";
      resumeData.value.school = schoolMajorInfo.school;
      resumeData.value.major = schoolMajorInfo.major;
      resumeData.value.workExpectList = data.workExpectList || [];
      resumeData.value.projectExpList = data.projectExpList || [];
      resumeData.value.educationList = data.educationList || [];
      resumeData.value.workExpList = data.workExpList || [];

      // 处理资格证书和专业技能
      credentialsList.value = data.credentials 
        ? data.credentials.split(',').filter(item => item.trim())
        : [];
      skillsList.value = data.skills 
        ? data.skills.split(',').filter(item => item.trim())
        : [];

      console.log("简历预览数据更新完成:", resumeData.value);
    }
  } catch (error) {
    console.log("获取简历预览数据失败:", error);
    uni.showToast({
      title: "获取简历数据失败",
      icon: "none",
    });
  }
};

// 页面加载时获取数据
onMounted(() => {
  console.log("简历预览页面加载，开始获取数据");
  fetchResumeData(); // 获取简历数据
});
</script>

<style scoped lang="less">
.preview-container {
  background-color: #ffffff;
  min-height: 100vh;
}

/* 页头样式 */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.header-right {
  width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collect-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  transition: all 0.2s ease;
}

.collect-btn:active {
  transform: scale(0.95);
  background-color: rgba(0, 0, 0, 0.05);
}

.collect-btn.collecting {
  opacity: 0.6;
  pointer-events: none;
}

.collect-icon {
  width: 48rpx;
  height: 48rpx;
}

/* 分割线 */
.divider {
  height: 1px;
  background-color: #f0f0f0;
}

/* 个人信息 */
.personal-info {
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.info-left {
  flex: 1;
}

.name-section {
  margin-bottom: 15rpx;
}

.name {
  font-size: 50rpx;
  font-weight: 600;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.5px;
}

.school-major {
  font-size: 28rpx;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

.avatar-section {
  margin-left: 40rpx;
}

.avatar-container {
  position: relative;
  width: 150rpx;
  height: 150rpx;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 75rpx;
  overflow: hidden;
}

.gender-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: #488afd;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #ffffff;
}

.gender-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 优势信息 */
.advantage-section {
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.status-item {
  margin-bottom: 20rpx;
}

.status-text {
  font-size: 32rpx;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.basic-info {
  display: flex;
  gap: 15rpx;
  margin-bottom: 25rpx;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.info-icon {
  width: 24rpx;
  height: 24rpx;
}

.info-item text {
  font-size: 28rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

.advantage-content {
  margin-top: 25rpx;
  padding-top: 20rpx;
}

.advantage-html {
  font-size: 32rpx;
  color: #333;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 去掉富文本中列表的默认间距 */
:deep(.advantage-html ol),
:deep(.advantage-html ul) {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

:deep(.advantage-html li) {
  list-style-position: inside;
}

/* 通用section样式 */
.section {
  margin-bottom: 40rpx;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.section-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 25rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 求职期望样式 */
.expect-list {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.expect-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.expect-item:last-child {
  border-bottom: none;
}

.expect-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.job-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.city {
  font-size: 28rpx;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

.salary {
  font-size: 32rpx;
  font-weight: 600;
  color: #00bdb4;
  margin-left: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.expect-industry {
  font-size: 28rpx;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

/* 项目经历样式 */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.project-item {
  padding: 25rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.project-item:last-child {
  border-bottom: none;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.project-name {
  font-weight: 600;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 32rpx;
}

.project-period {
  color: #666;
  font-size: 26rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

.project-role {
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.project-content,
.project-achievement,
.project-url {
  margin-bottom: 15rpx;
}

.content-label,
.achievement-label,
.url-label {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
  margin-bottom: 8rpx;
  display: block;
}

.content-html,
.achievement-html {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* 去掉所有富文本中列表的默认间距 */
:deep(.content-html ol),
:deep(.content-html ul),
:deep(.achievement-html ol),
:deep(.achievement-html ul) {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

:deep(.content-html li),
:deep(.achievement-html li) {
  list-style-position: inside;
}

.url-text {
  font-size: 28rpx;
  color: #00bdb4;
  word-break: break-all;
}

/* 工作经历样式 */
.work-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.work-item {
  padding: 25rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.work-item:last-child {
  border-bottom: none;
}

.work-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.company-name {
  font-weight: 600;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 32rpx;
}

.work-period {
  color: #666;
  font-size: 26rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

.work-position {
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.work-content {
  margin-bottom: 15rpx;
}

/* 教育经历样式 */
.education-list {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.education-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.education-item:last-child {
  border-bottom: none;
}

.education-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.education-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.school-name {
  font-weight: 600;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 30rpx;
}

.degree-major {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.education-degree,
.education-major {
  color: #666;
  font-size: 26rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}

.dot {
  color: #666;
  font-size: 26rpx;
}

.education-period {
  color: #666;
  font-size: 26rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  flex-shrink: 0;
}

/* 资格证书和专业技能标签样式 */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 15rpx 0;
}

.credentials-tag,
.skills-tag {
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 12rpx 24rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.credentials-tag .tag-text,
.skills-tag .tag-text {
  font-size: 26rpx;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
</style>
